<template>
  <el-dialog v-model="visible" title="轮播图">
    <el-form ref="formRef" label-width="120" :rules="rules" :model="drawerProps.row">
      <el-form-item label="排序值">
        <el-input-number :min="1" :max="10000" v-model="drawerProps.row.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="端口">
        <el-radio-group v-model="drawerProps.row.origin">
          <el-radio :label="1">移动端</el-radio>
          <el-radio :label="2">微信小程序</el-radio>
          <el-radio :label="3">百度小程序</el-radio>
          <el-radio :label="4">电脑端</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择图片" prop="cover">
        <el-image
          :src="url(drawerProps.row.cover)"
          class="cursor-pointer border border-dashed border-2px border-gray-300"
          fit="fill"
          :style="{
            width: drawerProps.row.origin !== 3 ? '250px' : '600px',
            height: drawerProps.row.origin !== 3 ? '125px' : '125px'
          }"
        >
          <template #error>
            <div class="text-12px w-1/1 h-1/1 flex-col flex justify-center" @click="chooseUrl">
              <div>
                <Plus class="w-30px h-30px m-auto" color="#d7d7d7" />
              </div>
              <div class="text-center mt-10px text-[var(--el-color-info-light-3)]">
                <span v-show="drawerProps.row.origin !== 3">轮播图长宽比例为2/1</span>
                <span v-show="drawerProps.row.origin === 3">轮播图长宽比例为4/1</span>
              </div>
            </div>
          </template>
        </el-image>
        <div class="flex h-1/1 flex-col justify-end" v-if="drawerProps.row.cover">
          <el-button link>重新选择</el-button>
        </div>
      </el-form-item>
      <el-form-item label="跳转">
        <el-radio-group v-model="drawerProps.row.isOut">
          <el-radio :label="false">内部跳转</el-radio>
          <el-radio :label="true">外部跳转</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="请填写跳转地址" v-if="drawerProps.row.isOut">
        <el-input v-model="drawerProps.row.outLink"></el-input>
      </el-form-item>
      <el-form-item v-if="!drawerProps.row.isOut" label="跳转页面">
        <el-select v-model="nowSelectRoute" @change="changeRoute">
          <el-option v-for="(p, index) in routeList" :label="p.name" :value="p.routeName" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="当前楼盘" v-show="info === 'detail' && drawerProps.row.pageType === 1">{{
        nowLouPan.name
      }}</el-form-item>
      <el-form-item label="选择楼盘" v-show="info === 'detail' && drawerProps.row.pageType === 1">
        <el-button type="primary" @click="chooseLouPan">选择楼盘名称</el-button>
      </el-form-item>
      <el-form-item label="选择文章" v-show="info === 'news' && drawerProps.row.pageType === 2">
        <el-select v-model="nowArticle">
          <el-option v-for="(p, index) in drawerProps.articleList" :key="index" :label="p.title" :value="p.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit">提交</el-button>
    </template>
    <su-cai-popup ref="suRef" mode="select" filter="image" @get-url="getUrl"></su-cai-popup>
    <LouPanCard ref="louRef" @card="getLouPanCard"></LouPanCard>
  </el-dialog>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, computed } from "vue";
import SuCaiPopup from "@/components/sucaiPopup/index.vue";
import { getRoutes } from "@/api/modules/shop";
import LouPanCard from "@/components/loupanCard/index.vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useUserStore } from "@/stores/modules/user";

const { userInfo } = useUserStore();

const url = (url: string) => {
  if (url) {
    return userInfo.prefix + url;
  } else {
    return "";
  }
};

const louRef = ref<InstanceType<typeof LouPanCard> | null>();

const nowSelectRoute = ref("detail");

const rules: FormRules = {
  cover: [{ required: true, message: "封面是必须的", trigger: "blur" }]
};

interface DrawerProps {
  row: any;
  api?: (params: any) => Promise<any>;
  getTable?: () => Promise<any>;
  articleList: any;
}

const nowLouPan = ref({ id: 0, name: "" });
const nowArticle = ref();

const changeRoute = (val: any) => {
  if (val === "detail") {
    drawerProps.value.row.pageType = 1;
  } else {
    drawerProps.value.row.pageType = 2;
  }
};

const chooseLouPan = () => {
  louRef.value?.acceptParams();
};

const getLouPanCard = (val: any) => {
  nowLouPan.value = val;
};

const initData: any = {
  sort: 1,
  origin: 0,
  cover: "",
  jumpType: 0,
  outLink: "",
  inLink: ""
};

const drawerProps = ref<DrawerProps>(JSON.parse(JSON.stringify(initData)));

const visible = ref(false);

const acceptParams = (params: any) => {
  drawerProps.value = params;
  drawerProps.value.row.pageType === 1 ? (nowSelectRoute.value = "detail") : (nowSelectRoute.value = "news");
  if (nowSelectRoute.value === "detail") {
    nowLouPan.value = { name: drawerProps.value.row.contName, id: drawerProps.value.row.contId };
    drawerProps.value.row.pageType = 1;
  } else {
    drawerProps.value.row.pageType = 2;
  }
  visible.value = true;
};

const info = computed(() => {
  return nowSelectRoute.value;
});

const suRef = ref<InstanceType<typeof SuCaiPopup> | null>();

const chooseUrl = () => {
  suRef.value?.acceptParams();
};

const routeList = ref();

const getRoutesList = async () => {
  const { data } = await getRoutes({ can_jump: 1 });
  routeList.value = data as any;
};

const getUrl = (val: any) => {
  drawerProps.value.row.cover = val.url;
  suRef.value?.close();
};

const formRef = ref<FormInstance>();

const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (!valid) return;
    const params: any = {
      sort: drawerProps.value.row.sort,
      cover: drawerProps.value.row.cover,
      isOut: false,
      link: "",
      origin: drawerProps.value.row.origin,
      pageType: nowSelectRoute.value === "detail" ? 1 : 2,
      contId: 0,
      contName: ""
    };
    if (drawerProps.value.row.isOut) {
      params.isOut = drawerProps.value.row.isOut;
      params.link = drawerProps.value.row.link;
    } else {
      params.isOut = false;
      const index = routeList.value.findIndex((e: any) => e.routeName === nowSelectRoute.value);
      if (nowSelectRoute.value === "detail") {
        params.link = routeList.value[index].match.replace("{loupan}", nowLouPan.value.id);
        params.contId = nowLouPan.value.id;
        params.contName = nowLouPan.value.name;
      } else if (nowSelectRoute.value === "news") {
        params.link = routeList.value[index].match.replace("{article}", nowArticle.value);
      }
    }
    try {
      await drawerProps.value.api!(params);
      ElMessage.success("成功");
      await drawerProps.value.getTable!();
      visible.value = false;
    } catch (error) {}
  });
};

onBeforeMount(() => {
  Promise.all([getRoutesList()]);
});

defineExpose({ acceptParams });
</script>

<style></style>
